<template>
  <div class="salary">


    <template >
        <div class="top" @click="selectDate">
            <span>{{showDate}}</span><i  class="icon-pack-up"></i>
        </div>
        <template v-if="!searchShowNoData">
            <template v-for="topUnit in holeTotalList" >
                <div class="totalContainer" v-if ='isShowTotalCon'>
                    <v-title :salaryGet="topUnit.salaryType.sfgz"  :salaryNeed="topUnit.salaryType.yfgz" isShowIcon>            
                        <div slot="first">
                            <span>应发总工资</span>
                            <span>{{returnCurrency(topUnit.totalSalary.summary)}} {{topUnit.totalSalary.summary.c_GROSS_AMT | keepTwoNum}}</span>
                        </div>  
                        <div slot="sec">
                            <span>实发总工资</span>
                            <span>{{returnCurrency(topUnit.totalSalary.summary)}} {{topUnit.totalSalary.summary.c_NET_PAY | keepTwoNum}}</span>
                        </div>          
    

                    </v-title>
                    <v-detail :salaryNeed="topUnit.totalSalary.summary.c_GROSS_AMT" :isShowIcon="topUnit.totalSalary.income.length > 0">
                        <span slot="title"><i  class="icon-wallet"></i>收入总合计</span>
                        <div slot="content">
                            <!-- <div><span>岗位工资</span><span> {{totalSumObj.summary.c_GROSS_AMT}}</span></div> -->
                            <div v-for="(item,index) in topUnit.totalSalary.income" :key="index">
                                <span>{{item.name}}</span>
                                <span style="width:auto;float:right"> {{item.value | keepTwoNum}}</span>
                            </div>
                        </div>
                        
                    </v-detail>
                    <v-detail :salaryNeed="topUnit.totalSalary.summary.c_DDCT_AMT" :curreny="topUnit.totalSalary.summary.currency_CD">
                        <span slot="title"><i  class="icon-pie"></i>扣减总合计</span>
                        <div slot="content">
                            <div v-for="(item,index) in topUnit.totalSalary.deduction" :key="index" >
                                <span>{{item.name}}</span>
                                <span style="width:auto;float:right"> {{item.value | keepTwoNum}}</span>
                            </div>
                            

                            <!-- <div v-if="topUnit.totalSalary.tax && topUnit.totalSalary.tax.length>0 "><span @click="showTax"  class="tax-title">工薪税<i v-if="!detailTax" class="icon-pack-up"></i><i v-if="detailTax" class="icon-pull"></i></span><span> {{getTaxDetail(topUnit.totalSalary.deduction)}}</span></div>
                            <div class="tax" v-if="topUnit.totalSalary.tax && topUnit.totalSalary.tax.length>0 " :class="{'collapse':!detailTax,'expand':detailTax}"  >
                                <div><span>应纳税收入</span><span style="width:auto;float:right"> {{topUnit.totalSalary.tax[0].tax.C_AMT008 | keepTwoNum}}</span></div>
                                <div><span>免税额</span><span style="width:auto;float:right"> {{topUnit.totalSalary.tax[0].tax.C_AMT005 | keepTwoNum}}</span></div>
                                <div><span>捐赠额</span><span style="width:auto;float:right"> {{topUnit.totalSalary.tax[0].tax.C_AMT002 | keepTwoNum}}</span></div>
                                <div><span>税率</span><span style="width:auto;float:right"> {{topUnit.totalSalary.tax[0].tax.C_AMT007}}</span></div>
                                <div><span>速算扣除法</span><span style="width:auto;float:right"> {{topUnit.totalSalary.tax[0].tax.C_AMT006 | keepTwoNum}}</span></div>
                                <div><span>个人所得税</span><span style="width:auto;float:right"> {{topUnit.totalSalary.tax[0].tax.C_AMT004 | keepTwoNum}}</span></div>
                            </div> -->


                        </div>


                    </v-detail>

                    <v-detail :salaryNeed="topUnit.totalSalary.summary.c_MPF" >
                        <span slot="title"><i  class="icon-cost"></i>公司承担总社保/MPF</span>
                        <div slot="content">
                            <template v-if="topUnit.totalSalary.fund" v-for="item in topUnit.totalSalary.fund" >
                                <div v-if='item.name && item.name.indexOf("个人")<1'>
                                    <span>{{item.name}}</span>
                                    <span style="width:auto;float:right">{{item.value | keepTwoNum}}</span>
                                </div>
                            </template>
                            <template v-if="topUnit.totalSalary.mpf" v-for="b in topUnit.totalSalary.mpf" >
                                <div v-if='b.name && b.name.indexOf("个人")<1'>
                                    <span>{{b.name}}</span>
                                    <span style="width:auto;float:right">{{b.value | keepTwoNum}}</span>
                                </div>
                            </template>
                        </div>
                    </v-detail>

                    <v-detail :salaryNeed="topUnit.totalSalary.summary.c_LABORCOST" isShowIcon>
                        <span slot="title"><i  class="icon-work-cost"></i>人工成本总合计</span>
                        <div><span>基本养老保险公司</span><span>{{topUnit.totalSalary.c_LABORCOST}}</span></div>
                    </v-detail>        
                
                </div>


                <template>
                    <div v-for="totalSumObj in topUnit.salarys" class="dateContainer">
                        <p v-if ='isShowTotalCon'>{{totalSumObj.summary.cal_PRD_ID.replace(/[\/]/g,"年") + "月"}}</p>
                        <v-title :salaryGet="totalSumObj.summary.sfgz" :salaryNeed="totalSumObj.summary.yfgz">
                            
                            <div slot="first">
                                <span>应发工资</span>
                                <span>{{returnCurrency(totalSumObj.summary)}} {{totalSumObj.summary.c_GROSS_AMT | keepTwoNum}}</span>
                            </div>  
                        
                            <div slot="sec">
                                <span>实发工资</span>
                                <span>{{returnCurrency(totalSumObj.summary)}} {{totalSumObj.summary.c_NET_PAY | keepTwoNum}}</span>
                            </div>

                                
                        </v-title>
                        <v-detail :salaryNeed="totalSumObj.summary.c_GROSS_AMT" :curreny="totalSumObj.summary.currency_CD" :isShowIcon="totalSumObj.income.length > 0">
                            <span slot="title"><i  class="icon-wallet"></i>收入合计</span>
                            <div slot="content">
                                <!-- <div><span>岗位工资</span><span> {{totalSumObj.summary.c_GROSS_AMT}}</span></div> -->
                                <div v-for="(item,index) in totalSumObj.income" :key="index">
                                    <span>{{item.name}}</span>
                                    <span style="width:auto;float:right"> {{item.value | keepTwoNum}}</span>
                                </div>
                            </div>
                            
                        </v-detail>
                        <v-detail :salaryNeed="totalSumObj.summary.c_DDCT_AMT" :curreny="totalSumObj.summary.currency_CD">
                            <span slot="title"><i  class="icon-pie"></i>扣减合计</span>
                            <div slot="content">
                                <div v-for="(item,index) in totalSumObj.deduction" :key="index" v-if="item.name !== '工薪税'">
                                    <span>{{item.name}}</span>
                                    <span style="width:auto;float:right"> {{item.value | keepTwoNum}}</span>
                                </div>
                                

                                <div v-if="totalSumObj.tax && totalSumObj.tax.length>0"><span @click="showTax"  class="tax-title">工薪税<i v-if="!detailTax" class="icon-pack-up"></i><i v-if="detailTax" class="icon-pull"></i></span><span> {{getTaxDetail(totalSumObj.deduction)}}</span></div>
                                <div class="tax" v-if="totalSumObj.tax && totalSumObj.tax.length>0 " :class="{'collapse':!detailTax,'expand':detailTax}"  >
                                    <div><span>应纳税收入</span><span style="width:auto;float:right"> {{totalSumObj.tax[0].tax.C_AMT008 | keepTwoNum}}</span></div>
                                    <div><span>免税额</span><span style="width:auto;float:right"> {{totalSumObj.tax[0].tax.C_AMT005 | keepTwoNum}}</span></div>
                                    <div><span>捐赠额</span><span style="width:auto;float:right"> {{totalSumObj.tax[0].tax.C_AMT002 | keepTwoNum}}</span></div>
                                    <div><span>税率</span><span style="width:auto;float:right"> {{totalSumObj.tax[0].tax.C_AMT007}}</span></div>
                                    <div><span>速算扣除法</span><span style="width:auto;float:right"> {{totalSumObj.tax[0].tax.C_AMT006 | keepTwoNum}}</span></div>
                                    <div><span>个人所得税</span><span style="width:auto;float:right"> {{totalSumObj.tax[0].tax.C_AMT004 | keepTwoNum}}</span></div>
                                </div>


                            </div>


                        </v-detail>

                        <v-detail :salaryNeed="totalSumObj.summary.c_MPF" :curreny="totalSumObj.summary.currency_CD">
                            <span slot="title"><i  class="icon-cost"></i>公司承担社保/MPF</span>
                            <div slot="content">
                                <template v-if="totalSumObj.fund" v-for="item in totalSumObj.fund" >
                                    <div v-if='item.name && item.name.indexOf("个人")<1'>
                                        <span>{{item.name}}</span>
                                        <span style="width:auto;float:right">{{item.value | keepTwoNum}}</span>
                                    </div>
                                </template>
                                <template v-if="totalSumObj.mpf" v-for="b in totalSumObj.mpf" >
                                    <div v-if='b.name && b.name.indexOf("个人")<1'>
                                        <span>{{b.name}}</span>
                                        <span style="width:auto;float:right">{{b.value | keepTwoNum}}</span>
                                    </div>
                                </template>
                            </div>
                        </v-detail>

                        <v-detail :salaryNeed="totalSumObj.summary.c_LABORCOST" :curreny="totalSumObj.summary.currency_CD" isShowIcon >
                            <span slot="title"><i  class="icon-work-cost"></i>人工成本合计</span>
                            <div><span>基本养老保险公司</span><span>{{totalSumObj.summary.c_LABORCOST}}</span></div>
                        </v-detail>


                    </div>
                </template>
            </template>


        </template>
        <div class="nullCon" v-if = 'searchShowNoData'>
            <div class="null-container" >

            </div> 
            <p class="nodate">查询无数据</p>      
        </div> 
    </template>


    <date-picker v-if="visibleDate" :visible.sync="visibleDate"  @search="search" v-model="pickDate"></date-picker>

    <mask-panel :showMask.sync="showMask">
        <vertify-code v-if="vertifyCodeNum == 100001" :code.sync="code" :phoneNum="phoneNum" :statusChange="statusChange" :successChange="successChange"></vertify-code>    
        <salary-search v-if="vertifyCodeNum == 10003" :statusChange="statusChange" :successChange="successChange"></salary-search>  
        <set-password v-if="vertifyCodeNum == 100002" :code.sync="code" :statusChange="statusChange" :successChange="successChange"></set-password>
        <success-show v-if="vertifyCodeNum == 100003" ></success-show>       
    </mask-panel>


  </div>
</template>

<script>

// for Vue 2.0
import datePick from '@/components/salary/components/pdSelect'
import title from '@/components/salary/title'
import detailList from '@/components/salary/detailList'
// const datePick = r => require.ensure([],() => r(require('@/components/salary/components/pdSelect')),'datePick');
import showLoading from '@/common/js/loading'

// import codeInput from '@/components/public/codeInput'

import vertifyCode from '@/components/salaryPassword/veritify'
import salarySearch from '@/components/salaryPassword/sPwordInput'
import setPassword from '@/components/salaryPassword/setPassword'
import successShow from '@/components/salaryPassword/success'
import maskPanel from '@/components/public/maskSalary'

export default { 
  data () {
    return {
        showDate:null,
        endDate:null,
        salaryGet:"",
        salaryNeed:"",
        visibleDate:false,
        detailTax:false,
        beginDate:null,
        totalList:[],
        totalSumList:{},
        totalSumObj:null,
        totalSumObj:null,
        deduction:[],
        taxList:[],
        curreny:'CNY',
        isShowTotalCon:false,
        fund:null,
        pickDate:null,
        isFirst:false,
        doneDataListShow:false,
        searchShowNoData:true,

        holeTotalList:[],

        showMask:false,

        vertifyCodeNum:'',
        phoneNum:'',
        code:''
    }
  },
  components: {
    'date-picker': datePick,
    'v-title':title,
    'v-detail':detailList,
    maskPanel,
    vertifyCode,
    salarySearch,
    setPassword,
    successShow
  },
  methods:{
     postAjax:function(){
        
        showLoading.showLoginPanel();
        setTimeout(function(){
            showLoading.destroyInstance();
        },14000)


        var params = {
           beginDate:this.beginDate,
           endDate:this.endDate
        };
        this.Axios.Post(this.URL.getEmployeeSalary.url,params).then(res =>{

            var result = res.data.datas;
            
            if (result == 10002) {
                this.getVeritifyCode();
                showLoading.destroyInstance();
                return;
            }

            var currencyList = result.TotalSalarys;
 

            if (!currencyList || currencyList.length == 0 || (currencyList.length == 1 && currencyList[0]['salarys'].length === 0)) {
                this.searchShowNoData=true;
                showLoading.destroyInstance();
                return;
            } else {
                this.searchShowNoData=false;
            }

            for (var j=0,len=currencyList.length;j<len;j++) {
                
                if (currencyList[j].salarys.length) {
                    currencyList[j].salarys.forEach((ele, index, arr) => {
                        if (ele.deduction.length) {
                        for (let j = 0; j < ele.deduction.length; j++) {
                            if (ele.deduction[j].name == "工薪税") {
                                let del = ele.deduction.splice(j, 1);

                                ele.deduction.push(del[0]);
                                break;
                            }
                        }
                        }
                    });
                }
                if (currencyList[j].salarys.length === 1 && len === 1) {
                    this.isShowTotalCon = false;
                    if (currencyList[j].salarys[0].summary) {
                        var result = this.returnCurrency(currencyList[j].salarys[0].summary);
                        currencyList[j].salaryType && (currencyList[j].salaryType.curreny = result)
                        // currencyList[j].salaryType.curreny = result;
                    }
                    

                    // this.totalList = result.salarys || [{}];
                } else {
                    this.isShowTotalCon = true;
                    if (currencyList[j].salarys[0].summary) {
                        var result = this.returnCurrency(currencyList[j].salarys[0].summary);
                        // currencyList[j].salaryType.curreny = result;
                        currencyList[j].salaryType && (currencyList[j].salaryType.curreny = result)
                    }
                   
                    // this.holeTotalList = currencyList;
                    // this.totalSumList = result.TotalSalarys || {};
                    // this.totalList = result.salarys || [{}];
                }
                
                               

            }
            this.holeTotalList = currencyList;


            // if (result && result.salarys && result.salarys.length>0) {
                
            //     this.searchShowNoData=false;
                
            //     if (result.salarys.length) {
            //         result.salarys.forEach((ele, index, arr) => {
            //             if (ele.deduction.length) {
            //             for (let j = 0; j < ele.deduction.length; j++) {
            //                 if (ele.deduction[j].name == "工薪税") {
            //                     let del = ele.deduction.splice(j, 1);

            //                     ele.deduction.push(del[0]);
            //                     break;
            //                 }
            //             }
            //             }
            //         });
            //     }
            //     if (result.salarys.length === 1) {
            //         this.isShowTotalCon = false;
            //         this.totalList = result.salarys || [{}];
            //     } else {
            //         this.isShowTotalCon = true;
            //         this.totalSumList = result.TotalSalarys || {};
            //         this.totalList = result.salarys || [{}];
            //     }
                
                

            // } 
            showLoading.destroyInstance();



  
        })
     },
     showTax:function(){
        this.detailTax = !this.detailTax;
     },
     returnCurrency:function(val){
         return val.currency_CD === 'CNY' ? '人民币' : (val.currency_CD === 'HKD'? '港元' : '未知')
     },
     getTaxDetail(val){
        if (!val || val.length == 0) {
            return ;
        }
        return val[val.length-1].value;
     },
     isShowTaxDetail(val){
        if (!val || val.length == 0) {
            return ;
        }
        return val[val.length-1].value === '工薪税';
     },
     selectDate:function(){
         this.visibleDate = !this.visibleDate;
     },
     search:function(){
        var date = this.showDate.split("-");

        if (date.length === 1){
            var date = date[0].replace(/["年"]/g,'/').replace(/["月"]/g,'');
            var arr = date.split("/");
            if (arr[1].length <2) {
                this.beginDate = this.endDate = arr[0] + "/0" + arr[1]
            } else {
                this.beginDate = this.endDate = date;
            }
             
        } else {
            var date1 = date[0].replace(/["年"]/g,'/').replace(/["月"]/g,'');
            var date2 = date[1].replace(/["年"]/g,'/').replace(/["月"]/g,'');
            var arr1 = date1.split("/");
            var arr2 = date2.split("/");
            if (arr1[1].length <2) {
                this.beginDate = arr1[0] + "/0" + arr1[1]
            } else {
                this.beginDate = date1;
            }
            if (arr2[1].length <2) {
                this.endDate = arr2[0] + "/0" + arr2[1]
            } else {
                this.endDate = date2;
            }
        }
        this.postAjax();
     },



    getVeritifyCode(){
        this.Axios
            .Post(this.URL.queryTwoPassword.url)
            .then((res) => {
                var result = res.data.datas;
                this.vertifyCodeNum = result

                if (this.vertifyCodeNum == 10001) {
                    showLoading.showLoginPanel();
                    setTimeout(function(){
                        showLoading.destroyInstance();
                    },14000)
                    this.postAjax();

                } else {
                    this.showMask = true;
                    if (this.vertifyCodeNum !='10003') {
                        this.vertifyCodeNum = 100001;
                        this.phoneNum = result;
                    }
                }
            })
            .catch((err) => {

                this.showMask = true
            });
    },
     
     statusChange:function(code,phoneNum){
         this.vertifyCodeNum = code
         if (phoneNum) {
             this.phoneNum = phoneNum;
         }
         if (code === '100003') {
             setTimeout(()=>{
                this.successChange();
                this.reloadData();
             },1000)
         }
     },

     successChange:function(code){
         this.showMask = false;
         if (code) {
            this.reloadData();
         } 
     },

     reloadData:function(){
        showLoading.showLoginPanel();
        setTimeout(function(){
            showLoading.destroyInstance();
        },14000)
        this.postAjax();         
     }

  },
  mounted:function(){


    if (window.location.origin != 'http://202.104.142.49:8089' && window.location.hostname != 'localhost' && location.search) {
        var token = location.search.split("=")[1];
        localStorage.setItem('token',token);
        
        this.Axios.Post(this.URL.webLogin.url,{}).then(res=>{
                if (res.data.status === 1) {

                    var year = new Date().getFullYear(),month =new Date().getMonth()+1;
                    this.showDate = this.pickDate = year + "年" + month + "月";
                    if (month<10) {
                        month = "0" + month;
                    }
                    this.beginDate = this.endDate = year + "/" + month;

                    this.getVeritifyCode();


                    

                }

        })

    } else {

        var year = new Date().getFullYear(),month =new Date().getMonth()+1;
        this.showDate = this.pickDate = year + "年" + month + "月";
        if (month<10) {
            month = "0" + month;
        }
        this.beginDate = this.endDate = year + "/" + month;

        this.getVeritifyCode();
    }

     


  },
  watch:{
      pickDate:function(newVal){
            if (!newVal) {
                return;
            }
            var arr = newVal.split("-");
            if (arr[0] === arr[1]) {
                this.showDate = arr[0];
            } else {
                this.showDate = newVal;
            }
      },

  },
  filters:{
        keepTwoNum: function(value) {
            if (!value) {   
                return '0.00';
            }
            var value=Math.round(parseFloat(value)*100)/100;

            var xsd=value.toString().split(".");
            if(xsd.length==1){
                value=value.toString()+".00";
                return value;
            }
            if(xsd.length>1){
                if(xsd[1].length<2){
                    value=value.toString()+"0";
                }
                return value;
            }
            


        }
    }
}
</script>
<style>
    .nodate{
      text-align:center;
      font-size:0.32rem;
    }
    .null-container{
        height: 5.2rem;
        background:url(/static/imgs/nodata.png) no-repeat center / 70%;
    }
    .nullCon:after{
        position: absolute;
        top:0;
        bottom:0;
        left: 0;
        right: 0;
        content:'';
        z-index:-1;
        background-color:#fff;
    }

</style>

<style lang="less" scoped>
.salary{
   background-color:#fff;
   div.top{
      text-align: center;
      height: 0.94rem;
      font-size:0.32rem;
      line-height: 0.94rem;
      font-weight: 500;
      .icon-pack-up{
        color:#aaa;
        margin:0.34rem;
      }
   }
   .dateContainer>p{
       color:#007de4;
       line-height:1rem;
       height:1rem;
       font-size:0.32rem;
       margin-left:0.2rem;
   }
   .nodate{
      text-align:center;
      font-size:0.32rem;
    }
    .null-container{
        height: 5.2rem;
        background:url(/static/imgs/nodata.png) no-repeat center / 70%;
    }

}
</style>
